<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://github.com/whatwg/html/issues/9799">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>

<form>
  <select style="appearance:base-select">
    <button>
      <selectedoption></selectedoption>
    </button>
    <datalist>
      <option class=one value=one>
        <span class=one>span</span> one
      </option>
      <option class=two value=two>
        <span class=two>span</span> two
      </option>
    </datalist>
  </select>
</form>

<script>
promise_test(async () => {
  const optionOne = document.querySelector('option.one');
  const optionTwo = document.querySelector('option.two');
  const selectedOption = document.querySelector('selectedoption');
  const select = document.querySelector('select');
  const spanTwo = document.querySelector('span.two');
  const form = document.querySelector('form');
  const button = document.querySelector('button');

  assert_equals(selectedOption.innerHTML, optionOne.innerHTML,
    'The innerHTML of <selectedoption> should initially match the innerHTML of the selected <option>.');

  select.value = 'two';
  await new Promise(queueMicrotask);
  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
    'The innerHTML of <selectedoption> should change after the selected option is changed.');

  spanTwo.textContent = 'new span';
  await new Promise(queueMicrotask);
  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
    '<selectedoption> should respond to text content changes.');

  spanTwo.appendChild(document.createElement('div'));
  await new Promise(queueMicrotask);
  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
    '<selectedoption> should respond to new elements being added to descendants.');

  spanTwo.setAttribute('data-foo', 'bar');
  await new Promise(queueMicrotask);
  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
    '<selectedoption> should respond to attributes being added to descendants.');

  form.reset();
  await new Promise(queueMicrotask);
  assert_equals(select.value, 'one',
    'form.reset() should change the selects value to one.');
  assert_equals(selectedOption.innerHTML, optionOne.innerHTML,
    'The innerHTML of <selectedoption> should be updated in response to a form reset.');

  await test_driver.bless();
  select.showPicker();
  await test_driver.click(optionTwo);
  await new Promise(queueMicrotask);
  assert_equals(select.value, 'two',
    'Clicking on another option should change select.value.');
  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
    'Clicking on an option element should update the <selectedoption>.');

  selectedOption.remove();
  await new Promise(queueMicrotask);
  assert_equals(selectedOption.innerHTML, '',
    'Removing the <selectedoption> from the <select> should make it clear its contents.');
  button.appendChild(selectedOption);
  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
    'Re-inserting the <selectedoption> should make it update its contents.');

  optionTwo.remove();
  await new Promise(queueMicrotask);
  assert_equals(selectedOption.innerHTML, optionOne.innerHTML,
    'The innerHTML of <selectedoption> should be updated in response to selected <option> removal.');
  optionOne.remove();
  assert_equals(selectedOption.innerHTML, '',
    'The content of <selectedoption> should be cleared if there is no selected <option>.');
}, 'The <selectedoption> element should reflect the HTML contents of the selected <option>.');
</script>
